<template>
	<view>
		<!-- 模板 -->
		<!-- <view v-if="config.template" @click="hadleDownloadTemplate">下载模板</view> -->

		<!-- 描述 -->
		<view v-for="(item,index) in config.describe" :key="index" class="describe">
			<span v-if="config.describe.length>1">{{index+1}}.</span>
			<span>{{item}}</span>
		</view>
		<!-- 上传 -->
		<view class="picList">
			<view v-for="(item,index) in files" :key="index" class="item">
				<img :src="item.url" alt="" v-if='item.type == "image"'>
				<img src="https://supply.zhongyimotor.com/upload/applet/fileIcon2.png" alt="" v-else>
				<view class="remove" @click="remove(index)"><u-icon name="close-circle-fill" color="#FA3534"
						size="38"></u-icon></view>
			</view>
			<view class="item" @click="onUpload">
				<img src="https://supply.zhongyimotor.com/upload/applet/pic_upload_btn@2x.png" alt="">
			</view>
		</view>
		<!-- <u-upload :action="action" :max-count="99" :custom-btn="true" @on-uploaded="contractUploadOver"
			:show-upload-list="true" ref="uUpload" name="uploadFiles" width="140" height="140">
			<view slot="addBtn" class="uploadBtn" hover-class="slot-btn__hover" hover-stay-time="150">
				<img src="https://supply.zhongyimotor.com/upload/applet/pic_upload@2x.png" alt="">
			</view>
		</u-upload> -->
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Array,
				default: () => []
			},
			config: {
				type: Object,
				default: () => {}
			},
		},
		model: {
			prop: "value",
			event: "change"
		},
		computed: {
			files: {
				get() {
					return this.value || [];
				},
				set(val) {
					this.$emit('change', val);
				}
			}
		},
		data() {
			return {
				action: "",
				showList: []
			}
		},
		onReady() {
			this.action = this.$config.uploadFilesUrl
		},
		methods: {
			remove(index) {
				this.showList.splice(index, 1)
				const files = []
				this.showList.forEach((item) => {
					files.push(item.url)
				})
				this.files = files
			},
			onUpload() {
				const that = this
				// chooseMessageFile
				uni.chooseMessageFile({
					count: 9, //默认100
					// type:'file',
					// extension:this.config.accept || [],
					success: function(res) {
						const files = JSON.parse(JSON.stringify(that.files))
						uni.showLoading({
							title: '上传中'
						})
						res.tempFiles.forEach(async (item, index) => {
							uni.uploadFile({
								url: that.$config.uploadFileUrl,
								filePath: item.path,
								name: "uploadFile",
								success: (data) => {

									const file = JSON.parse(data.data)
									files.push(file.result.url)
									file.result.type = item.type
									that.showList.push(file.result)
									that.files = files
									uni.hideLoading()
								}
							})
						})
					}
				});

			},
		}
	}
</script>

<style scoped lang="scss">
	.picList {
		display: flex;
		margin: 30rpx 0;
		flex-wrap: wrap;

		.item {
			width: 140rpx;
			height: 140rpx;
			margin: 18rpx;
			position: relative;

			.remove {
				position: absolute;
				top: -28rpx;
				right: -20rpx;
				width: 38rpx;
				height: 38rpx;
			}
		}
	}

	.describe {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 46rpx;
		word-break: break-all
	}
</style>